<template>
  <div style="width: 100%; height: 400px">
    <el-form-item label="position">
      <input read-only :value="position.join(',')" style="width: 180px" />
    </el-form-item>
    <amap
      cache-key="map"
      ref="map"
      view-mode="2D"
      map-style="amap://styles/whitesmoke"
      async
      :zoom.sync="zoom"
      :center.sync="center"
      :pitch.sync="pitch"
      :rotation.sync="rotation"
      :show-indoor-map="false"
      is-hotspot
      @hotspotclick="onHotspotClick"
    >
      <amap-marker
        :position.sync="position"
        :label="{
          content: 'Marker标记带文字，我是可以拖拽的',
          direction: 'bottom',
        }"
        draggable
      />
    </amap>
  </div>
</template>

<script>
export default {
  data () {
    return {
      center: [116.473778, 39.990661],
      position: [116.473778, 39.990661],
      zoom: 14,
      pitch: 45,
      rotation: 15
    }
  },
  methods: {
    onHotspotClick (e) {
      if (e && e.lnglat) {
        this.center = [e.lnglat.lng, e.lnglat.lat]
      }
    }
  }
}
</script>
